<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="description" content="Login - Presto">
    <title>openLookeng Login</title>

    <link rel="icon" href="assets/favicon.ico">

    <!-- Bootstrap core -->
    <link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery -->
    <script type="text/javascript" src="vendor/jquery/jquery-2.2.3.min.js"></script>

    <!-- Bootstrap JS -->
    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.js"></script>

    <!-- Sparkline -->
    <script type="text/javascript" src="vendor/jquery.sparkline/jquery.sparkline.min.js"></script>

    <!-- CSS loader -->
    <link href="vendor/css-loaders/loader.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="assets/presto.css" rel="stylesheet">

    <style type="text/css">
        body {
            background-color: #bbb;
        }

        .login-form {
            width: 30vw;
            margin: 30vh auto;
            min-width: 400px;
        }

        .login-form form {
            background: #f7f7f7;
            box-shadow: 7px 5px 20px 0px rgb(46 58 118);
            padding: 50px;
            border-bottom-right-radius: 50px;
            border-top-left-radius: 50px;
        }

        .login-form h2 {
            color: black;
            margin: 0 0 15px;
        }

        .form-control, .btn {
            min-height: 38px;
            border-radius: 2px;
        }

        .btn {
            background-color: #337AB7;
            font-size: 15px;
            font-weight: bold;
        }

        .login-form .radio-Group {
            min-height: 38px;
            border-radius: 2px;
        }

        .login-form .radio-Group label{
            padding: 7px;
            font-size: 15px;
            font-weight: normal;
        }


    </style>
</head>

<body>

<div class="loader">Loading...</div>

<div class="login-form">
    <form id="login" action="../ui/api/login" method="post" style="display: none">
        <div>
            <img src="assets/lk-logos.svg" width="140px" height="40px"/>
        </div>
        <br/>
        <div class="form-group">
            <input id="username" name="username" type="text" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
            <input id="password" name="password" type="password" class="form-control" placeholder="Password" required="required">
        </div>
        <div class="radio-Group">
            <input type="radio" name="loginOptions" id="basicRadio" autocomplete="off" onclick="basicAuthentication()" checked /><label for="basicRadio" >Basic</label>
            <input type="radio" name="loginOptions" id="kerberosRadio" autocomplete="off" onclick="kerberosAuthentication()" /><label for="kerberosRadio" >Kerberos</label>
            <span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="When Kerberos authentication is selected, it is recommended to configure Kerberos authentication with Firefox browser."></span>
        </div>
        <input id="redirectPath" name="redirectPath" type="hidden">
        <div class="form-group">
            <button id="submit" type="submit" class="btn btn-primary btn-block">Log In</button>
        </div>
    </form>
</div>

<script>
    var redirectPath = window.location.search.substring(1);
    if (redirectPath.indexOf('&') !== -1) {
        redirectPath = redirectPath.substring(0, redirectPath.indexOf('&'));
    }
    $("#redirectPath").val(redirectPath);

    if (window.location.protocol !== 'https:') {
        $(".login-form .radio-Group").hide();
        $("#password")
            .prop('required', false)
            .prop('placeholder', 'Password not allowed')
            .prop('readonly', true);
    }
    $("#login").show();
    $(".loader").hide();
    $("#username").focus().val("");

    function basicAuthentication(){
        $(".login-form").show();
        $(".loader").hide();
    }

    function kerberosAuthentication(){
        $(".login-form").hide();
        $(".loader").show();
        window.location.href='/ui';
    }
</script>
<!-- Fonts -->
<link href="assets/stylesheets/fonts.googleapis.com.css" rel="stylesheet">

</body>
</html>
